## lit组件总结

- lit响应式: 对象引用不变, 视图不会刷新(vue)

- 事件名不能有大写!!!(???), 统一用短横线连接, Event加[bubbles/composed](https://lit.dev/docs/components/events/)参数

- 事件e格式

  ```tsx
  {
    isTrusted: false
    _vts: 1709568214607
    bubbles: true
    cancelBubble: false
    cancelable: false
    composed: false
    currentTarget: null
    defaultPrevented: false
    detail: {list: Array(6)}
    eventPhase: 0
    returnValue: true
    srcElement: fl-tree-sd
    target: fl-tree-sd
    timeStamp: 191574.30000000075
    type: "update-value"
  }
  ```



```markdown
| lit-组件         | html             | preact                                                       | vue                                         |
| ---------------- | ---------------- | ------------------------------------------------------------ | ------------------------------------------- |
| 传递复杂对象     | dom.list = list  | <fl-tree list={list}>                                        | <fl-tree :list="list">                      |
| 触发更新条件     | 引用改变         | 引用改变this.setState({list: xxx})                           | 不管是ref还是reactive都需要引用改变才能刷新 |
| 事件update-value | addEventListener | const treeRef = useRef(null);<br />treeRef.current.addEventListener | @update-value="handleXXX"                   |
```
